/*! _accordion.scss | Vuero | Css ninja 2020-2021 */

/*
    1. Accordion
    2. Accordion Dark mode
    3. Collapse
    4. Collapse Dark mode
    5. Image Accordion
*/

/* ==========================================================================
1. Accordion
========================================================================== */

.single-accordion {
  background: var(--white);
  margin: 0 auto;
  box-shadow: var(--light-box-shadow);
  border-radius: var(--radius-large);
  overflow: hidden;

  .accordion-item {
    &.is-active {
      .accordion-header {
        &::before {
          background-color: var(--primary);
        }
      }
      .accordion-content {
        display: block;
      }
    }
  }

  .accordion-header {
    border-bottom: 1px solid #dde0e7;
    color: var(--dark-text);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--font-alt);
    padding: 1.5rem;
    display: block;

    &:hover {
      background: #f6f7f9;
    }

    &::before {
      content: '';
      vertical-align: middle;
      display: inline-block;
      width: 0.75rem;
      height: 0.75rem;
      border-radius: var(--radius-rounded);
      background-color: #b1b5be;
      margin-right: 0.75rem;
    }
  }

  .accordion-content {
    display: none;
    border-bottom: 1px solid #dde0e7;
    background: #f6f7f9;
    padding: 1.5rem;
    color: var(--light-text);
    font-family: var(--font);
  }
}

/* ==========================================================================
2. Accordion Dark mode
========================================================================== */

.is-dark {
  .single-accordion {
    background: var(--dark-sidebar-light-4);
    border-color: var(--dark-sidebar-light-12);

    .accordion-header {
      color: var(--dark-dark-text);
      border-color: var(--dark-sidebar-light-12);

      &:hover {
        background: var(--dark-sidebar-light-6);
      }

      &::before {
        background: var(--dark-sidebar);
      }

      &.is-active {
        &::before {
          background-color: var(--primary);
        }
      }
    }

    .accordion-content {
      background: var(--dark-sidebar);
      border-color: var(--dark-sidebar-light-8);
    }
  }
}

/* ==========================================================================
3. Collapse
========================================================================== */

.collapse {
  @include vuero-s-card();

  padding: 0;
  margin-bottom: 1.5rem;

  &.has-plus {
    &[open] {
      .collapse-header {
        .collapse-icon {
          transform: rotate(45deg);
        }
      }
      .collapse-content {
        display: block;
      }
    }
  }

  &.has-chevron {
    &[open] {
      .collapse-header {
        .collapse-icon {
          transform: rotate(180deg);
        }
      }
      .collapse-content {
        display: block;
      }
    }
  }

  &[open] {
    .collapse-icon {
      border-color: var(--fade-grey-dark-3) !important;
      box-shadow: var(--light-box-shadow);
    }
  }

  .collapse-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 20px;
    cursor: pointer;

    h3 {
      font-family: var(--font-alt);
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--dark-text);
    }

    .collapse-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 30px;
      width: 30px;
      background: var(--white);
      border-radius: var(--radius-rounded);
      border: 1px solid transparent;
      transition: all 0.3s;

      > span {
        display: block;
        height: 16px;
        width: 16px;
      }

      svg {
        height: 16px;
        width: 16px;
        color: var(--light-text);
      }
    }
  }

  .collapse-content {
    display: none;
    padding: 0 20px 20px 20px;
    color: var(--light-text);
    font-family: var(--font);

    p:not(:last-child) {
      margin-bottom: 12px;
    }
  }
}

/* ==========================================================================
4. Collapse Dark mode
========================================================================== */

.is-dark {
  .collapse {
    @include vuero-card--dark();

    &[open] {
      .collapse-header {
        .collapse-icon {
          background: var(--dark-sidebar-light-2);
          border-color: var(--dark-sidebar-light-4) !important;
        }
      }
    }

    .collapse-header {
      h3 {
        color: var(--dark-dark-text);
      }

      .collapse-icon {
        background: var(--dark-sidebar-light-6);
        border-color: var(--dark-sidebar-light-6);
      }
    }
  }
}

/* ==========================================================================
5. Image Accordion
========================================================================== */

$a-height: 250px;
$text-offset: $a-height - 90;

.image-accordion {
  width: 100%;
  // max-width: 1080px;
  height: $a-height;
  overflow: hidden;
  margin: 50px auto;

  ul {
    width: 100%;
    display: table;
    table-layout: fixed;
    margin: 0;
    padding: 0;

    li {
      display: table-cell;
      vertical-align: bottom;
      position: relative;
      width: 16.666%;
      height: $a-height;
      background-repeat: no-repeat;
      background-position: center center;
      transition: all 500ms ease;

      div {
        display: block;
        overflow: hidden;
        width: 100%;

        a {
          display: block;
          height: $a-height;
          width: 100%;
          position: relative;
          z-index: 3;
          vertical-align: bottom;
          padding: 15px 20px;
          box-sizing: border-box;
          color: var(--white);
          text-decoration: none;
          font-family: Open Sans, sans-serif;
          transition: all 200ms ease;

          * {
            opacity: 0;
            margin: 0;
            width: 100%;
            text-overflow: ellipsis;
            position: relative;
            z-index: 5;
            white-space: nowrap;
            overflow: hidden;
            -webkit-transform: translateX(-20px);
            -webkit-transition: all 400ms ease;
            transform: translateX(-20px);
            transition: all 400ms ease;
          }

          h2 {
            font-family: var(--font-alt);
            font-weight: 300;
            text-overflow: clip;
            font-size: 1.4rem;
            text-transform: uppercase;
            margin-bottom: 0;
            top: $text-offset;
          }

          p {
            top: $text-offset;
            font-size: 13.5px;
            color: var(--white);
          }
        }
      }
    }

    &:hover li,
    &:focus-within li {
      width: 8%;
    }

    li:focus {
      outline: none;
    }

    &:hover li:hover,
    li:focus,
    &:focus-within li:focus {
      width: 60%;

      a {
        background: rgba(0, 0, 0, 0.4);

        * {
          opacity: 1;
          -webkit-transform: translateX(0);
          transform: translateX(0);
        }
      }
    }

    &:hover li {
      width: 8% !important;

      a * {
        opacity: 0 !important;
      }
    }

    &:hover li:hover {
      width: 60% !important;

      a {
        background: rgba(0, 0, 0, 0.4);

        * {
          opacity: 1 !important;
          -webkit-transform: translateX(0);
          transform: translateX(0);
        }
      }
    }
  }
}

@media screen and (max-width: 600px) {
  .image-accordion {
    height: auto;

    ul,
    ul:hover {
      li,
      li:hover {
        position: relative;
        display: table;
        table-layout: fixed;
        width: 100% !important;
        -webkit-transition: none;
        transition: none;
      }
    }
  }
}
